<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>林杨桢</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
     <!-- Demo styles -->
  <style>
        html,
        body {
          position: relative;
          height: 100%;
          box-sizing: border-box;
        }
    
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }
    
        .swiper-container {
          width: 100%;
          height: 100%;
        }
    
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }


    #a{
        width: 100%;
        height: 172.8px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        font-size: 6.75px;
        box-sizing: border-box;
        background-color: #EEE;
    }
    #a div{
        width: 20%;
        height: 40px;
    }
    #a img{
        width: 40px;
    }
    #a a{
        color: #666;
        text-decoration: none;
        display: block;

    }
    #open{
      width: 100%;
      height: 44px;
      background-color: black;
      display: flex;
      color: cornsilk;
      font-size: 14px;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #open li{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #open li:nth-child(1)>img{
      width: 10px;
    }
    #open li:nth-child(2)>img{
      width: 30px;
    }
    #open li:nth-child(1){
      width: 8%;
    }
    #open li:nth-child(2){
      width: 10%;
    }
    #open li:nth-child(3){
      width: 57%;
    }
    #open li:nth-child(4){
      width: 25%;
      background-color: red;
    }

    #one{
      width: 100%;
      height: 44px;
      display: flex;
      background-color:#aa363d;
      align-items: center;
      color: seashell;
      position:sticky;
      top:0px;
      z-index:99;
      box-sizing: border-box;
    }
    #one>div:nth-child(1){
      box-sizing: border-box;
      margin-left: 0;
    width: 40px;
    height: 44px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #aa363d;
    }
    #one>div:nth-child(3){
    width: 40px;
    height: 44px;
    display:flex;
    justify-content: center;
    align-items: center;
    }
    #one>div:nth-child(2){
    flex-grow: 1;
    height: 30px;
    border-radius: 22px;
    background-color:seashell;
    display:flex;
    justify-content: center;
    align-items: center;
    }
    #jj{
      box-sizing: border-box;
    margin: -3px 0 0 3px;
    width: 20px;
    height: 18px;
    display: block;
    background: url() no-repeat;
    background-size: 100% 100%;
    }
    #one>div:nth-child(2)>div:nth-child(1){

      display: block;
    width: 20px;
    height: 15px;
    background: url("./image/jd-sprites.png");
    background-size: 200px;
    background-position: 0px 0px;
    margin: 2px 10px 2px 5px;
    float: left;
    position: relative;
    }
    
    #one>div:nth-child(2)>div:nth-child(2){
      display: block;
    width: 15px;
    height: 15px;
    background: url("./image/jd-sprites.png");
    background-size: 200px;
    background-position: -82px 0px;
    margin: 0px 8px 0px 10px;
    float: left;
    margin-right:250px; 
  
    }
    #one div:nth-child(2)>div:nth-child(1)::after{
      content: '';
      display: block;
      width: 1px;
      height: 15px;
      background-color:chocolate;
      left: 40px;
      position: absolute;
      left:30px;
    }

    #two{
      box-sizing: border-box;
      width: 100%;
      height: 60.03px;
      background-color: #fff;
      position:fixed;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #two div{
          width: 20%;
          height:60.03px;
          display: flex;
      justify-content: center;
      align-items: center;
    }
    #two img{
      width: 60px;
      height: 46px;
    }

    
    #four .swiper-container {
      width: 100%;
      height: 100%;
    }

   #four  .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
     
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    #four{
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    #four>div:nth-child(1){
      width: 100%;
      height: 110px;
      position: absolute;
      top: 0;
      background-color:#aa363d ;
    }
    #four>div:nth-child(2){
      width: 350.18px;
      height: 140.6px;
    }
    #four>div:nth-child(2) img{
      width: 350.18px;
      height: 140.6px;
    }
  #four>div:nth-child(3){
    position: fixed;
    z-index: 100;
    width: 35px;
    height: 26px;
    right: 0;
    background-color: red;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;

  }
  #four>div:nth-child(3)>div{
    width: 100%;
    height: 100%;
    background: url(./image/5-0.png) no-repeat;
    background-size: 26px 26px;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
  }
  #five{
    box-sizing: border-box;
    width: 100%;
    height: 139.18px;
    display: flex;
    justify-content: center;
    margin: 10px 0px 10px 0px;
    
  }
  #five>div{
    box-sizing: border-box;
    width: 355.2px;
    height: 100%;
    background-color: #FFF;
    border-radius: 13px;
  }
  #five>div>div:nth-child(1){
    width: 100%;
    height: 34.01px;
    background-color: #FFF;
    border-top-left-radius: 13px;
    border-top-right-radius:13px ;
    display: flex;
    justify-content:space-between;
    align-items: center;
  }
  #five>div>div:nth-child(1)>span{
    display: inline-block;
    height: 20px;
    width: 70px;
    font-size: 10px;
    margin: 0px 3px 0px 3px;
    text-align: center;
  }
  #five-one{
    display: flex;
   justify-content:space-around;
   align-items: center;
  }
  #five-one img{
    width: 54.16px;
    height: 54.16px;
  }
  #five-one>div{
    width: 54.16px;
    height: 54.16px;
  }
  #five-one>div>div:nth-child(2){
    padding-left: 10px;
  }
  
  #ninght{
    display: flex;
    justify-content: center;
    background-color: #FFF;
    margin-bottom: 10px;
  }
  #ninght img{
    width:125.05px ;
    height: 100.05px;
    
  }
  #thereone{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #ten {
    box-sizing: border-box;
    width: 375px;
    height: 240.13px;
    display: flex;
    justify-content: space-around;
    align-self: center;
    flex-wrap: wrap;
    background-color: #FFF;
  }
  #ten img{
    width: 60.03px;
    height: 60.03px;
    
  }
  #ten div{
    float: left;
  }
  #ten span{
    display: block;
  }
  #ten span:nth-child(2){
    margin: 0px 0px 10px 0px;
  }
  #ten span:nth-child(1){
   font-family:'PingFangSC-Light,PingFang-Medium,PingFangSC-Regular,Helvetica,Droid Sans,Arial,sans-serif';
   font-weight: 700;
  }
  #ten span:nth-child(2){
    font-size: 12px;
    color:black;
  }
  #ten>div:nth-child(1),#ten>div:nth-child(2){
    box-sizing: border-box;
    width: 177.6px;
    height: 120.06px;
   padding: 10px 0px 0px 10px;
  }
  #ten>div::nth-child(3){
   width:88.8px ;
   height:120.06px ;
  }
  #ten>div>div>img:nth-child(2){
    margin: 0px 0px 0px 26px;
  }
  #eleven{
    width: 100%;
    height: 264.02px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content:space-around;
  }
  #eleven>div{
    width: 173px;
    height: 264.02px;
    color: black;
    background-color: #FFF;
  }
  #eleven img{
    width: 173px;
    height: 173px;
  }
  #eleven>div>div{
    width: 173px;
    height: 10px;
    text-overflow: ellipsis;
   
  }
    </style>
      </style>
</head>
<body>

  
    <ul id="open">
      <li><img src="./image/02-1.png"></li>
      <li><img src="./image/02-2.png"></li>
      <li><span>打开京东APP</span></li>
      <li><span>立即打开</span></li>
    </ul>

    <div id="one">
        <div>
        <span id="jj"></span>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div><span>登录</span></div>
    </div>

  <div id="four">

  <div></div>
  <div>
    <div class="swiper-container a">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./image/4-0.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./image/4-1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./image/4-2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./image/4-3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./image/4-4.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./image/4-5.jpg" alt=""></div>
      </div>
     
      <div class="swiper-pagination"></div>
    </div>
  </div>
 </div> 
 

    <div id="bb">

        <!-- Swiper -->
  <div class="swiper-container b ">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
                <div id="a">
                        <div><img src="./image/1.png" alt=""><a href="">京东超市</a></div>
                        <div><img src="./image/2.png" alt=""><a href="">数码电器</a></div>
                        <div><img src="./image/3.png" alt=""><a href="">京东服饰</a></div>
                        <div><img src="./image/4.png" alt=""><a href="">京东生鲜</a></div>
                        <div><img src="./image/5.png" alt=""><a href="">京东到家</a></div>
                        <div><img src="./image/6.png" alt=""><a href="">充值缴费</a></div>
                        <div><img src="./image/7.png" alt=""><a href="">9.9元拼</a></div>
                        <div><img src="./image/8.png" alt=""><a href="">领券</a></div>
                        <div><img src="./image/9.png" alt=""><a href="">领金贴</a></div>
                        <div><img src="./image/10.png" alt=""><a href="">PLUS会员</a></div>
                    </div>
          </div>
          <div class="swiper-slide">
                <div id="a">
                        <div><img src="./image/1.png" alt=""><a href="">京东超市</a></div>
                        <div><img src="./image/2.png" alt=""><a href="">数码电器</a></div>
                        <div><img src="./image/3.png" alt=""><a href="">京东服饰</a></div>
                        <div><img src="./image/4.png" alt=""><a href="">京东生鲜</a></div>
                        <div><img src="./image/5.png" alt=""><a href="">京东到家</a></div>
                        <div><img src="./image/6.png" alt=""><a href="">充值缴费</a></div>
                        <div><img src="./image/7.png" alt=""><a href="">9.9元拼</a></div>
                        <div><img src="./image/8.png" alt=""><a href="">领券</a></div>
                        <div><img src="./image/9.png" alt=""><a href="">领金贴</a></div>
                        <div><img src="./image/10.png" alt=""><a href="">PLUS会员</a></div>
                    </div>
          </div>
         
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <div id="five">
      <div>
      <div>
        <span>京东秒杀</span>
        <span></span>
        <span></span>
        <span></span>
        <span style="color: crimson;">更多秒杀</span>
      </div>   
     <!-- #five-one>div>div -->
      <div id="five-one">
       <div>
         <div><img src="./image/6-5.jpg" alt=""></div>
         <div>
           <span style="color: red; font-size: 10px;">127￥</span><br>
           <span style="color: silver; font-size: 10px;">127￥</span>
         </div>
       </div>
       <div>
         <div><img src="./image/6-1.jpg" alt=""></div>
         <div>
           <span style="color: red; font-size: 10px;">127￥</span><br>
           <span style="color: silver; font-size: 10px;">127￥</span>
         </div>
       </div>
       <div>
         <div><img src="./image/6-2.jpg" alt=""></div>
         <div>
           <span style="color: red; font-size: 10px;">127￥</span><br>
           <span style="color: silver; font-size: 10px;">127￥</span>
         </div>
       </div>
       <div>
         <div><img src="./image/6-3.jpg" alt=""></div>
         <div>
           <span style="color: red; font-size: 10px;">127￥</span><br>
           <span style="color: silver; font-size: 10px;">127￥</span>
         </div>
       </div>
       <div>
         <div><img src="./image/6-4.jpg" alt=""></div>
         <div>
           <span style="color: red; font-size: 10px;">127￥</span><br>
           <span style="color: silver; font-size: 10px;">127￥</span>
         </div>
       </div>
      </div>
     </div>
    </div> 
    
     <!-- 最底下 -->
    <div id="two">
    <div><img src="./image/3-0.png" alt=""></div>
    <div><img src="./image/3-1.png" alt=""></div>
    <div><img src="./image/3-2.png" alt=""></div>
    <div><img src="./image/3-3.png" alt=""></div>
    <div><img src="./image/3-4.png" alt=""></div>
    </div>

     <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.b', {
      loop:true,
      pagination: {
        el: '.swiper-pagination',
      },
    });

    // Initialize Swiper  four
    var swiper1 = new Swiper('.a', {
      spaceBetween: 30,
      centeredSlides: true,
      loop:true,
      pagination: {
        el: '.swiper-pagination',
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
  
  </script>
</body>
</html>